<script setup>
import {ref,onMounted} from 'vue';
import requestUtil from '@/utils/request.js';
import Cookies from 'js-cookie';
import { ElMessage } from 'element-plus';
let balance = ref(0);
let load = async () => {
  let res = await requestUtil.post('/app/getUserInfo/', {userId: Cookies.get('userId')});
  balance.value = res.data.userInfo.balance;
}
onMounted(()=>{
  load();
})
const addBalance = async() => {
  let res = await requestUtil.post('/app/addBalance/', {userId: Cookies.get('userId')});
  if(res.data.code == 200){
    load();
    ElMessage.success('充值成功');
  }
}
const onClickLeft = () => {
  window.history.back();
}
</script>

<template>
  <div class="mybalance">
    <van-nav-bar
        title="我的余额"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    />
    <div class="balance">
      <div class="balance-title">可用余额(余额)</div>
      <div class="balance-price">{{ balance }}</div>
    </div>
    <div class="btn1">
      <div class="recharge">
        <button @click="addBalance">充值</button>
      </div>
    </div>
    <!-- <div class="btn2">
      <div class="text">提现只能提现到银行卡</div>
      <div class="bank">
        <button>银行卡管理</button>
      </div>
    </div> -->
  </div>
</template>

<style scoped>
.balance .balance-title {
  margin-top: 10px;
  margin-left: 30px;
  font-weight: 400;
  font-size: 28px;
  color: #666666;
}

.balance .balance-price {
  padding: 82px 0 73px 0;
  font-weight: 400;
  font-size: 48px;
  color: #FFBA20;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn1 div button {
  padding: 20px 0;
  width: 90%;
  border: none;
}

.btn1 div {
  padding: 10px 0;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn1 .recharge button {
  background-color: #FFB200;
  font-weight: 400;
  font-size: 32px;
  color: #FFFFFF;
}

.btn2 .text{
  margin-left: 34px;
  font-weight: 400;
  font-size: 24px;
  color: #999999;
}
.btn2 .bank{
  padding-top: 94px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn2 .bank button{
  border: none;
  padding: 20px 0;
  width: 90%;
}
</style>